<template>
  <div>
    <!-------------------- 水处理运行日志 -------------------->
    <TableHeader
      :data="{
        mainTitle: '水处理运行日志',
        date: '2021年12月12日',
        company: '青岛崂山矿泉水有限公司',
        code: 'LK-QF-LS1-10-012-11-01',
      }"
    />
    <RowcolTableVxeTable :tableData="tableData1"/>
    <!-- <TableHeader
      :data="{
        subTitle: '取水、供水情况',
      }"
    />
    <CommonVxeTable :tableData="tableData2" />
     <TableHeader
      :data="{
        subTitle: '班后管路消毒情况',
      }"
    /> -->
    <!-- <RowcolTableVxeTable :tableData="tableData3" :reverse="true"/> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData1: {
        columns: [
          {
            field: "date",
            title: "日期",
            align: "center",
            minWidth: "100px",
          },
          {
            title: "灌装水臭氧机操作记录",
            align: "center",
            minWidth: "100px",
            children: [
              {
                field: "value",
                align: "center",
                minWidth: "100px",
                title: "设备运行是否正常",
                options: [
                  {
                    dictLabel: "正常",
                    dictValue: "0",
                  },
                  {
                    dictLabel: "停用",
                    dictValue: "1",
                  },
                ],
                // width: "120",
              },
              {
                field: "value",
                align: "center",
                minWidth: "100px",
                title: "三级过滤压差（≤0.1mpa）",
                // width: "120",
              },
              {
                field: "value",
                align: "center",
                minWidth: "100px",
                title: "电流(A)",
                // width: "120",
              },
              {
                field: "value",
                align: "center",
                minWidth: "100px",
                title: "O2流量（L/min)",
                // width: "120",
              },
              {
                field: "value",
                align: "center",
                minWidth: "100px",
                title: "臭氧浓度(mg/L)",
                // width: "120",
              },
            ],
          },
          {
            title: "冲盖水臭氧机操作记录",
            children: [
              {
                field: "value",
                align: "center",
                minWidth: "100px",
                title: "设备运行是否正常",
                options: [
                  {
                    dictLabel: "正常",
                    dictValue: "0",
                  },
                  {
                    dictLabel: "停用",
                    dictValue: "1",
                  },
                ],
                // width: "120",
              },
              {
                field: "value",
                align: "center",
                minWidth: "100px",
                title: "三级过滤压差（≤0.1mpa）",
                // width: "120",
              },
              {
                field: "value",
                align: "center",
                minWidth: "100px",
                title: "水流量（T/H)",
                // width: "120",
              },
              {
                field: "value",
                align: "center",
                minWidth: "100px",
                title: "O2流量（L/min)",
                // width: "120",
              },
            ],
          },
          {
            title: "CO2添加记录",
            children: [
              {
                field: "value",
                align: "center",
                minWidth: "100px",
                title: "水流量（T/H)",
                // width: "120",
              },
              {
                field: "value",
                align: "center",
                minWidth: "100px",
                title: "CO2流量（L/min)",
                // width: "120",
              },
            ],
          },
          {
            field: "value",
            align: "center",
            minWidth: "100px",
            title: "碳滤后余氯含量(mg/L)",
            // width: "120",
          },
        ],
        data: [],
      },
      tableData2: {
        columns: [
          {
            field: "value",
            title: "项目",
            align: "center",
            minWidth: "100px",
          },
          {
            title: "取水时间",
            align: "center",
            minWidth: "100px",
            field: "value",
          },
          {
            title: "停水时间",
            align: "center",
            minWidth: "100px",
            field: "value",
          },
          {
            title: "消毒液含量（mg/L）",
            align: "center",
            minWidth: "100px",
            field: "value",
          },
          {
            title: "供水时间",
            align: "center",
            minWidth: "100px",
            field: "value",
          },
          {
            title: "排污时间",
            align: "center",
            minWidth: "100px",
            field: "value",
          },
        ],
        data: [],
      },
      tableData3: {
        columns: [
          {
            field: "value",
            title: "消毒液浓度",
            align: "center",
            minWidth: "100px",
          },
          {
            title: "O2更换情况            ",
            align: "center",
            minWidth: "100px",
            children: [
              {
                field: "value",
                align: "center",
                minWidth: "100px",
                title: "指针显示",
              },
              {
                field: "value",
                align: "center",
                minWidth: "100px",
                title: "更换时间",
                // width: "120",
              },
            ],
          },
          {
            title: "CO2更换情况",
            children: [
              {
                field: "value",
                align: "center",
                minWidth: "100px",
                title: "指针显示",
                // width: "120",
              },
              {
                field: "value",
                align: "center",
                minWidth: "100px",
                title: "更换时间",
                // width: "120",
              },
            ],
          },
          {
            field: "value",
            align: "center",
            minWidth: "100px",
            title: "一级膜滤后压力（mpa）",
            // width: "120",
          },
            {
            field: "value",
            align: "center",
            minWidth: "100px",
            title: "碳滤压力(Mpa）",
            // width: "120",
          },
            {
            field: "value",
            align: "center",
            minWidth: "100px",
            title: "二级膜滤后压力（mpa）",
            // width: "120",
          },
            {
            field: "value",
            align: "center",
            minWidth: "100px",
            title: "砂滤压力(Mpa）",
            // width: "120",
          },
            {
            field: "value",
            align: "center",
            minWidth: "100px",
            title: "灌装用水(t）",
            // width: "120",
          },
            {
            field: "value",
            align: "center",
            minWidth: "100px",
            title: "洗盖用水(t）",
            // width: "120",
          },
           {
            field: "value",
            align: "center",
            minWidth: "100px",
            title: "回水(t）",
            // width: "120",
          },
           {
            field: "value",
            align: "center",
            minWidth: "100px",
            title: "次氯酸钠使用量(mL）",
            // width: "120",
          },
        ],
        data: [],
      },
    };
  },
  created() {
    for (let i = 0; i < 4; i++) {
      this.tableData1.data.push({
        date: "2012-33-22",
        value: 12312312,
      });
      this.tableData2.data.push({
        value: 1212312,
      });
       this.tableData3.data.push({
        value: 1212312,
      });
    }
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
// .box {
//   width: 100%;
//   height: 100%;
//   overflow: auto;
//   padding: 10px;
// }
// /*滚动条样式*/
// .box::-webkit-scrollbar {
//   width: 7px !important;
//   height: 7px !important;
//   cursor: pointer !important;
// }

// .box::-webkit-scrollbar-thumb {
//   border-radius: 7px !important;
//   -webkit-box-shadow: inset 0 0 7px rgba(33, 117, 255, 0.2) !important;
//   background: rgba(4, 162, 253, 0.5) !important;
//   cursor: pointer !important;
// }

// .box::-webkit-scrollbar-track {
//   -webkit-box-shadow: inset 0 0 7px rgba(33, 117, 255, 0.2) !important;
//   border-radius: 7px !important;
//   background: rgba(33, 117, 255, 0.2) !important;
//   cursor: pointer !important;
// }
</style>>

